<script setup lang="ts">
import { } from 'vue'
import { NPopover, NCard } from 'naive-ui'
import { useFlowStore } from '../flowStore'
import { useDictStore } from '@/stores/dictStore'

const props = defineProps(["placement", "userInfo"])

const flowStore = useFlowStore()
const dictStore = useDictStore()
</script>
<template>
    <n-popover trigger="hover" raw :show-arrow="false" :placement="props.placement">
        <template #trigger>
            <slot></slot>
        </template>
        <n-card style="width:360px;" :header-style="{ backgroundColor: 'rgb(6, 112, 255)' }">
            <template #header>
                <span style="color:#ffffff"> {{ props.userInfo.userName }} </span>
            </template>
            <div style="padding-top:18px;">
                <table>
                    <tr class="row">
                        <td class="label">员工工号</td>
                        <td class="value">{{ props.userInfo.userId }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">所属部门</td>
                        <td class="value">{{ props.userInfo.orgName }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">员工性别</td>
                        <td class="value">{{ dictStore.dictItem("SEX", props.userInfo.sex) }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">民族</td>
                        <td class="value">{{ dictStore.dictItem("NATIONALITY", props.userInfo.nationality) }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">出生日期</td>
                        <td class="value">{{ props.userInfo.birthday }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">常驻地</td>
                        <td class="value">{{ props.userInfo.address }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">联系方式</td>
                        <td class="value">{{ props.userInfo.telephone }}</td>
                    </tr>
                    <tr class="row">
                        <td class="label">邮箱</td>
                        <td class="value">{{ props.userInfo.email }}</td>
                    </tr>
                </table>
            </div>
        </n-card>
    </n-popover>
</template>
<style scoped>
.row {
    height: 36px;
}

.label {
    width: 100px;
}

.value {}
</style>